<template>
  <commonformdialog
    :isshowDialogs="isshowDialog"
    :dialogTitle="dialogTitle"
    @closetextDialog="closeDialog"
    @confirmbtn="confirmbtn"
  >
    <div class="innerloding">
      <div class="formarea">
        <el-tree
          :data="list"
          show-checkbox
          node-key="id"
          default-expand-all
          :icon-class="null"
          :render-content="renderContent"
          :expand-on-click-node="false"
          :props="defaultProps"
          :check-strictly="checkStrictly"
          :check-on-click-node="true"
          ref="rootTree"
        ></el-tree>
      </div>
    </div>
  </commonformdialog>
</template>

<script>
import commonformdialog from '@/components/commondialog/commondialog'

//按钮权限验证
import Treeselect from '@riophae/vue-treeselect' //下拉树组件
import checkPermission from '@/utils/permission'
import { userRuleOption,userRoleRead ,userRoleSetting} from "@/api/userManagement";

export default {
  data() {
    return {
      isdisableenroll: false,
      list: [],
      currentRule: [],
      dataInfo: '',
      defaultProps: {
        children: 'children',
        label: 'title',
      },
      checkStrictly: false,
    }
  },
  components: {
    commonformdialog,
    Treeselect,
  },
  props: {
    //是否显示弹窗
    isshowDialog: {
      type: Boolean,
      default: false,
      required: true,
    },
    //表单的名字
    dialogTitle: {
      type: String,
      default: '权限设置',
    },
  },

  methods: {
    checkPermission,
    closeDialog() {
      this.$emit('closedialog')
    },
    //获取选中
    getCheckedKeys(data, keys, key) {
      var res = []
      recursion(data, false)
      return res
      function recursion(arr, isChild) {
        var aCheck = []
        for (var i = 0; i < arr.length; i++) {
          var obj = arr[i]
          aCheck[i] = false
          if (obj.children) {
            aCheck[i] = recursion(obj.children, true) ? true : aCheck[i]
            if (aCheck[i]) {
              res.push(obj[key])
            }
          }
          for (var j = 0; j < keys.length; j++) {
            if (obj[key] == keys[j]) {
              aCheck[i] = true
              if (res.indexOf(obj[key]) == -1) {
                res.push(obj[key])
              }
              break
            }
          }
        }
        if (isChild) {
          return aCheck.indexOf(true) != -1
        }
      }
    },
    //提交权限
    async confirmbtn() {
      var menuIds = this.getCheckedKeys(
        this.list,
        this.$refs.rootTree.getCheckedKeys(),
        'id'
      )
      console.log(menuIds)
      let params = {}
      params.id = this.dataInfo.id
      params.rule = menuIds.join(',')
      let data = await userRoleSetting(params)
      if (data.code == '0000') {
        this.$message({
          type: 'success',
          message: data.msg,
        })
      }

      this.$emit('confirm')
    },
    //获取所有权限
     //获取下拉
    async getaccountRuleTree() {
      let data = await userRuleOption();
      this.list = data.data;
       setTimeout(() => {
        this.changeCss()
      }, 1)
    },
 
    async getaccountRoleRead(id){
      let data = await userRoleRead({
          id: id,
        })
        this.dataInfo = data.data
    },
    setDefaultChecked(){
    this.$nextTick(()=>{
          if (this.dataInfo.rule) {
          this.currentRule = this.dataInfo.rule
           this.dataInfo.rule.forEach((p) => {
              this.$refs.rootTree.setChecked(p, true, false)
            })
        }
      })
  },
    //渲染权限树
    renderContent(h, { node, data }) {
      let classname = ''
      let group = ''
      let grouptitleClass = ''
      //1-导航；2-菜单；3-按钮
    
      if (!data.children  || (data.children.length == 0 && data.parentId != 0)) {
        classname = 'levelname'
      }
      if (data.group) {
        (group = data.group), (grouptitleClass = 'grouptitleClass')
      }
      return (
        <div class={classname ? classname : grouptitleClass}>
          <p class="grouptitle"> {group} </p> <p>{data.title} </p>{' '}
        </div>
      )
    },
    //改变CSS
    changeCss() {
      // levelname是上面的最底层节点的名字
      var levelName = document.getElementsByClassName('levelname')
      var grouptitleClass = document.getElementsByClassName('grouptitleClass')

      for (var i = 0; i < levelName.length; i++) {
        // cssFloat 兼容 ie6-8  styleFloat 兼容ie9及标准浏览器
        levelName[i].parentNode.style.cssFloat = 'left'
        // 最底层的节点，包括多选框和名字都让他左浮动
        levelName[i].parentNode.style.styleFloat = 'left'
      }
      for (var i = 0; i < grouptitleClass.length; i++) {
        grouptitleClass[i].parentNode.style.marginTop = '50px'
      }
    },
  },
  watch: {
    dataInfo: function (val) {
        if (val) {
        this.setDefaultChecked()
      }
    },
  },
  mounted() {

  },
}
</script>

<style scoped lang='scss'>
::v-deep {
  .levelname {
    margin-right: 10px;
  }

  /* 隐藏树形展开箭头图标*/
  .el-tree-node__expand-icon {
    display: none;
  }

  .el-tree-node__content {
    margin-bottom: 10px;
    position: relative;
  }

  .collapse-transition {
    transition: none !important;
  }

  .grouptitle {
    position: absolute;
    left: 0;
    top: -50px;
    font-weight: bold;
    font-size: 18px;
  }
}

.formarea {
  overflow: hidden;
  height: 100%;
}

.formtips {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.4);
  margin-left: 100px;
}

.title {
  padding: 15px 0;
  border-bottom: 1px solid #eee;
  font-weight: bold;
  font-size: 18px;
}

.grop {
  margin-top: 20px;
}

.gropItem {
  border-bottom: 1px dashed #eee;
}

.gropItemNoboder {
  border: none;
}
</style>
